<template>
  <view>
    <view class="stat-cards">
      <!-- 省略统计卡片代码 -->
    </view>

    <!-- 搜索和操作按钮区域 -->
    <view class="controls">
      <!-- 搜索框 -->
      <uni-search-bar @confirm="searchMembers" v-model="searchQuery" class="search-bar" placeholder="请输入会员姓名或卡号" />

      <!-- 操作按钮 -->
      <view class="control-buttons">
        <button class="control-button" size="mini" @click="searchMembers">查询</button>
     <!--   <button class="control-button" size="mini">更多筛选</button>
        <button class="control-button" size="mini" @click="openAddPopup">新增会员</button>
        <button class="control-button" size="mini">批量导入</button>
        <button class="control-button" size="mini">会员导出</button>
        <button class="control-button" size="mini">发送短信</button>
        <button class="control-button" size="mini">发送优惠券</button>
        <button class="control-button" size="mini">删除会员</button> -->
      </view>
    </view>

    <!-- 会员列表表格 -->
    <uni-table>
      <uni-tr>
        <uni-th align="center">生日</uni-th>
        <uni-th align="center">卡号</uni-th>
        <uni-th align="center">姓名</uni-th>
        <uni-th align="center">电话</uni-th>
        <uni-th align="center">分店</uni-th>
        <uni-th align="center">余额</uni-th>
        <uni-th align="center">等级</uni-th>
		<uni-th align="center">会员开卡时间</uni-th>
       <!-- <uni-th align="center">会员状态</uni-th> -->

        <uni-th align="center">操作</uni-th>
      </uni-tr>

      <!-- 动态生成数据行 -->
      <uni-tr v-for="(member, index) in filteredMembers" :key="member.id">
        <uni-td align="center">{{ member.birth_date }}</uni-td>
        <uni-td align="center">{{ member.card_number }}</uni-td>
        <uni-td align="center">{{ member.name }}</uni-td>
        <uni-td align="center">{{ member.phone }}</uni-td>
        <uni-td align="center">{{ member.store_name }}</uni-td>
        <uni-td align="center">{{ member.account_balance }}</uni-td>
        <uni-td align="center">{{ member.level_name }}</uni-td>
		<uni-td align="center">{{ member.created_at }}</uni-td>
        <!-- <uni-td align="center">{{ member.status }}</uni-td> -->

        <uni-td align="center">
          <!-- <button class="button" type="primary" @click="openEdit(member)" size="mini">编辑</button> -->
          <button class="button" type="warn" @click="confirmDelete(member.id)" size="mini" style="margin-left: 5px;">删除</button>
          <!-- <button @click="openDetails" size="mini" style="margin-left: 5px;">查看详情</button> -->
        </uni-td>
      </uni-tr>
    </uni-table>

    <!-- 分页组件 -->
    <view style="margin-top: 20px;">
      <uni-pagination 
        :current="currentPage" 
        :total="totalPages" 
        :pageSize="pageSize"
        @change="handlePageChange" 
      />
    </view>

    <!-- 使用 uni-popup 的弹窗 -->
    <uni-popup ref="editPopup" type="center">
      <view class="member-modal">
        <h3>编辑会员信息</h3>
        <!-- 表单输入字段 -->
        <view class="form-row">
          <label>姓名：</label>
          <input v-model="currentMember.name" class="input-field" />
        </view>
        <view class="form-row">
          <label>卡号：</label>
          <input v-model="currentMember.card_number" class="input-field" />
        </view>
        <view class="form-row">
          <label>电话：</label>
          <input v-model="currentMember.phone" class="input-field" />
        </view>
        <view class="form-row">
          <label>分店：</label>
          <input v-model="currentMember.store_name" class="input-field" />
        </view>
        <view class="form-row">
          <label>余额：</label>
          <input v-model="currentMember.account_balance" class="input-field" />
        </view>
        <view class="form-row">
          <label>等级：</label>
          <input v-model="currentMember.level" class="input-field" />
        </view>
       <!-- <view class="form-row">
          <label>会员状态：</label>
          <input v-model="currentMember.status" class="input-field" />
        </view> -->
       <!-- <view class="form-row">
          <label>操作员：</label>
          <input v-model="currentMember.operator" class="input-field" />
        </view> -->
        <!-- 保存和取消按钮 -->
        <view class="button-group">
          <button class="modal-button save" @click="saveMember" size="mini">保存</button>
          <button class="modal-button cancel" @click="closePopup" size="mini">取消</button>
        </view>
      </view>
    </uni-popup>

    <!-- 新增会员弹窗 -->
    <uni-popup ref="addPopup" type="center">
      <view class="member-modal">
        <h3>新增会员</h3>
        <!-- 表单输入字段 -->
        <view class="form-row">
          <label>姓名：</label>
          <input v-model="newMember.name" class="input-field" />
        </view>
        <view class="form-row">
          <label>卡号：</label>
          <input v-model="newMember.cardNumber" class="input-field" />
        </view>
        <view class="form-row">
          <label>电话：</label>
          <input v-model="newMember.phone" class="input-field" />
        </view>
        <view class="form-row">
          <label>分店：</label>
          <input v-model="newMember.branch" class="input-field" />
        </view>
        <view class="form-row">
          <label>余额：</label>
          <input v-model="newMember.balance" class="input-field" />
        </view>
        <view class="form-row">
          <label>等级：</label>
          <input v-model="newMember.level" class="input-field" />
        </view>
        <!-- <view class="form-row">
          <label>会员状态：</label>
          <input v-model="newMember.status" class="input-field" />
        </view> -->
        <view class="form-row">
          <label>操作员：</label>
          <input v-model="newMember.operator" class="input-field" />
        </view>
        <!-- 保存和取消按钮 -->
        <view class="button-group">
          <button class="modal-button save" @click="addMember" size="mini">保存</button>
          <button class="modal-button cancel" @click="closePopup" size="mini">取消</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalPages: 1,
      members: [],
      filteredMembers: [],
      currentMember: {},
      newMember: {
        name: '',
        cardNumber: '',
        phone: '',
        branch: '',
        balance: '',
        level: '',
        status: '',
        operator: ''
      },
      totalPages: 1,
      currentPage: 1,
      pageSize: 10,
      searchQuery: '',
	    userInfo: {}
    };
  },
  methods: {
    async fetchMembers() {
      try {
        const res = await this.$myRuquest({
          url: '/index/plugin.foreground/get_members',
          method: 'GET',
          data: {
            page: this.currentPage,
            pageSize: this.pageSize,
            searchQuery: this.searchQuery,
            shop_id: this.userInfo.shop_id,
          }
        });
        
        if (res.data.code === 200) {
          this.members = res.data.data.members || [];
          this.totalPages = res.data.data.totalPages || 1;
          this.filteredMembers = [...this.members];
        }
      } catch (error) {
        console.error('获取会员列表失败:', error);
        uni.showToast({
          title: '获取数据失败',
          icon: 'none'
        });
      }
    },
    searchMembers() {
      this.currentPage = 1;
      this.fetchMembers();
    },
    openAddPopup() {
      this.newMember = {
        name: '',
        cardNumber: '',
        phone: '',
        branch: '',
        balance: '',
        level: '',
        status: '',
        operator: ''
      };
      this.$refs.addPopup.open();
    },
    openEdit(member) {
      this.currentMember = { ...member };
      this.$refs.editPopup.open();
    },
    closePopup() {
      this.$refs.editPopup.close();
      this.$refs.addPopup.close();
    },
    async saveMember() {
      const res = await this.$myRuquest({
        url: '/index/plugin.foreground/save_member',
        method: 'POST',
        data: this.currentMember
      });
      if (res.data.code === 200) {
        
        this.closePopup();
      }
    },
    async addMember() {
      const res = await this.$myRuquest({
        url: '/index/plugin.foreground/add_member',
        method: 'POST',
        data: this.newMember
      });
      if (res.data.code === 200) {
        this.fetchMembers();
        this.closePopup();
      }
    },//删除会员
    async confirmDelete(id) {

      const res = await this.$myRuquest({
        url: '/index/plugin.foreground/delete_member',
        method: 'POST',
        data: {
		        id: id ,
		       }
      });
      if (res.data.code === 200) {
		  
		   uni.showToast({
			title: '删除成功',
			duration: 2000,
			icon: 'none'
		   })
      }
    },
    handlePageChange(e) {
      // 兼容不同版本的 uni-pagination 事件参数
      const currentPage = e.current || (e.detail && e.detail.current) || 1;
      this.currentPage = currentPage;
      this.fetchMembers();
    },
    openDetails() {
      this.$bus.$emit('switch-component', 'MemberDetails');
    },
	checkLoginStatus() {
	  const token = uni.getStorageSync('token');
			
	  if (token) {
	  
	    this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
	  } else {

	    this.userInfo = {};
	    this.$router.push('/pages/login/login');
	  }
	},
	
  },
  created() {
    this.checkLoginStatus();
  },
  mounted() {
    this.fetchMembers();
  }
};
</script>


<style>
.member-modal {
  width: 80%;
  max-width: 500px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h3 {
  margin-bottom: 20px;
  text-align: center;
  color: #333;
}

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

label {
  width: 80px;
  color: #666;
  margin-right: 10px;
}

.input-field {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
}

.button-group {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.modal-button {
  flex: 1;
  padding: 10px 15px;
  margin: 0 5px;
  background-color: #1abc9c;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.modal-button.save:hover {
  background-color: #16a085;
}

.modal-button.cancel {
  background-color: #e74c3c;
}

.modal-button.cancel:hover {
  background-color: #c0392b;
}

.stat-cards {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.stat-card {
  flex: 1 1 23%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #ddd;
}

.card-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  text-align: center;
}

.divider {
  width: 2px;
  height: 40px;
  background-color: #dcdcdc;
}

.green {
  background-color: #2ecc71;
  color: #fff;
}

.blue {
  background-color: #3498db;
  color: #fff;
}

.orange {
  background-color: #f39c12;
  color: #fff;
}

.red {
  background-color: #e74c3c;
  color: #fff;
}

.stat-card text {
  margin-top: 5px;
}

.controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.search-bar {
  flex: 1;
  margin-right: 15px;
}

.control-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.control-button {
  padding: 8px 12px;
  background-color: #3498db;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.control-button:hover {
  background-color: #2980b9;
}
</style>
